<template>
    <div class="cartcontrol">
        <div class="cart-decrease" v-show="drug.count>0" @click="decreaseCount">
            <i class="el-icon-remove"></i>
        </div>
        <input class="cart-count" v-show="drug.count>0" v-model="drug.count">
        <div class="cart-add el-icon-circle-plus" v-if="drug.count&&drug.count>0" @click="addCount"></div>
        <div class="buy" v-else @click="addCount">加入购物车</div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from "vue";

    export default {
        props: {
            drug: {
                type: Object
            }
        },
        methods: {
            addCount(event) {
                if (!this.drug.count) {
                    Vue.set(this.drug, 'count', 1);
                } else {
                    this.drug.count++;
                }
                let rect = event.target.getBoundingClientRect();
                this.$emit('addCount', rect.x += 10, rect.y += 10);
            },
            decreaseCount() {
                this.drug.count--;
            }
        },
        watch: {
            'drug.count'(newCount) {
                if (newCount > 99) {
                    this.drug.count = 99;
                    this.$message({
                        message: '单次购买数量不可超过99哦',
                        type: 'warning',
                        customClass: 'alert-shadow'
                    });
                }
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

    .cartcontrol {
        font-size 0
        user-select none

        .cart-decrease {
            display inline-block
            padding 6px
            margin-bottom 10px

            .el-icon-remove {
                display inline-block
                line-height 24px
                font-size 24px
                color rgb(0, 160, 220)
            }
        }

        .cart-count {
            display inline-block
            vertical-align text-bottom
            width 40px
            height 10px
            padding 3px
            text-align center
            font-size 12px
            color rgb(147, 153, 159)
        }

        .cart-add {
            display inline-block
            padding 6px
            line-height 24px
            font-size 24px
            color rgb(0, 160, 220)
        }

        .buy {
            display inline-block
            width 80px
            height 24px
            line-height 23px
            font-size 12px
            text-align center
            border-radius 12px
            color white
            background rgb(0, 160, 220)
        }
    }
</style>
